---
import type { LogoKey } from '~/data/logos';
import Badge from '../Badge.astro';
import Card from './Card.astro';
import Grid from './Grid.astro';

export interface Props {
	minimal?: boolean;
	links: {
		title: string;
		description?: string;
		href: string;
		logo?: LogoKey;
		/** Map of tag IDs to translated tag display text, e.g. `{ static: 'Statisch' }`. */
		tags?: Record<string, string>;
		/** The language of the content if it differs from the main page language. */
		lang?: string;
	}[];
	class?: string;
}

const { links, minimal = false, class: classes } = Astro.props as Props;

const currentPage = new URL(Astro.request.url).pathname;
---

<section class:list={['cards-nav', classes, 'not-content']}>
	<slot />
	<Grid minimal={minimal}>
		{
			links.map(({ description, href, logo, title, tags, lang }) => (
				<Card
					{...{ minimal, logo, href, lang }}
					current={currentPage.includes(href)}
					class={Object.keys(tags || {}).join(' ')}
				>
					<Fragment slot="title" set:html={title} />
					<Fragment slot="details">
						{description && <p class="description">{description}</p>}
						{tags && (
							<div class="tags sl-flex">
								{Object.values(tags).map((tag) => (
									<Badge>{tag}</Badge>
								))}
							</div>
						)}
					</Fragment>
				</Card>
			))
		}
	</Grid>
</section>

<style>
	.description {
		color: var(--sl-color-gray-2);
		font-size: var(--sl-text-body-sm);
	}

	.tags {
		gap: 0.5rem;
	}
</style>
